<template>
	<view class="page-friend-request">
		<cl-topbar title="好友请求消息" :border="false">
			<!-- <view class="btn" slot="append">
				<cl-button type="text">清空</cl-button>
			</view> -->
		</cl-topbar>

		<!-- 好友请求列表 -->
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<!-- 头像 -->
				<view class="avatar">
					<image lazy-load="true" :src="item.avatar" mode="aspectFill" />
					<view class="man" v-if="item.sex == 1">
						<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
					</view>

					<view class="woman" v-else-if="item.sex == 2">
						<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
					</view>
				</view>

				<!-- 昵称，距离 -->
				<view class="group">
					<text class="name">{{ item.name }}</text>
					<text class="distance">{{ item.distance }}</text>
				</view>

				<!-- 时间，按钮 -->
				<view class="right">
					<text class="time"></text>
					<cl-button round>接受</cl-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					avatar: require("@/static/images/request-1.png"),
					name: "遇见",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 2,
				},
				{
					avatar: require("@/static/images/meet-3.png"),
					name: "可乐气泡水",
					distance: "距你5.2km",
					time: "5分钟前活跃",
					sex: 1,
				},
				{
					avatar: require("@/static/images/meet-2.png"),
					name: "是阿狸呀",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 1,
				},
				{
					avatar: require("@/static/images/request-2.png"),
					name: "心悸",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 2,
				},
				{
					avatar: require("@/static/images/request-3.png"),
					name: "小黄狗",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 2,
				},
				{
					avatar: require("@/static/images/request-4.png"),
					name: "我可爱的米糖",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 2,
				},
				{
					avatar: require("@/static/images/request-1.png"),
					name: "遇见",
					distance: "距你5.2km",
					time: "3分钟前活跃",
					sex: 2,
				},
			],
		};
	},
};
</script>

<style lang="scss" scoped>
.page-friend-request {
	.cl-topbar {
		.btn {
			//#ifdef MP-WEIXIN
			margin-right: 100rpx;
			//#endif
		}
	}
	.list {
		padding: 30rpx;
		.item {
			display: flex;
			align-items: center;
			height: 102rpx;
			margin-bottom: 54rpx;
			.avatar {
				position: relative;
				width: 102rpx;
				height: 102rpx;
				margin-right: 30rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.man {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
					background-color: #58bcff;
					border-radius: 50%;
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
				.woman {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
					background-color: #ff5a70;
					border-radius: 50%;
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
			.group {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				flex: 1;
				.name {
					display: block;
					font-size: 32rpx;
					font-weight: 500;
					color: #282828;
				}
				.distance {
					font-size: 28rpx;
					font-weight: 400;
					color: #b1b1b1;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				.time {
					display: block;
					font-size: 22rpx;
					font-weight: 400;
					color: #b1b1b1;
				}
				/deep/.cl-button {
					width: 126rpx;
					height: 60rpx;
					border: 2rpx solid #ff5a70;
					&__text {
						font-size: 28rpx;
						font-weight: 400;
						color: #ff5a70;
					}
				}
			}
		}
	}
}
</style>
